<html>

<head>
    <meta charset="utf-8">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="vue.js"></script>
    <style>
       .inner{
           height: 150px;
           background-color: darkcyan;
       }
    </style>

</head>

<body>
    <div id="app">
        
        <div class="inner" @click.self = "divHandler">
            <input type="button" value="戳我" @click="btnHandler">
        </div>
    
        <a href="https://www.baidu.com" @click.prevent.once= "linkClick">百度？</a>
        <h4 v-text="msg"></h4>
        <!-- v-bind:单向数据绑定 -->
        <input type="text" v-bind:value="msg" style="width: 300px;">
        <!-- v-model:双向数据绑定 只能用在表单元素 -->
        <input type="text" v-model="msg" style="width: 300px;">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello world',
                msg2: '对于生成UUID，大家可以谷歌一下，直接通过 mac 终端生成 32 位 UUID。',
                mytitle: '自定义标题',
                intervalId:null
            },
            methods: {
                divHandler() {
                    console.log('这里触发了 inner的点击事件')
                },
              
                btnHandler() {
                    console.log('这里触发了 btn的点击事件')           
                     }
                     ,
                     linkClick(){
                        console.log('触发了链接666') 
                     }

            },
        })
    </script>
</body>


</html>